<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>考勤</title>
    
    <link href="../../css/mui.min.css" rel="stylesheet"/>
    <link href="../../css/style.css" rel="stylesheet"/>
    <link href="../../css/iconfont.css" rel="stylesheet"/>
    <script src="../../js/mui.min.js"></script>

</head>
<body>
<header class="mui-bar mui-bar-nav">
	<button class="mui-action-back mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-left"><span class="mui-icon mui-icon-left-nav"></span>我的</button>
	<h1 class="mui-title"></h1>
</header>
<style>
	.mui-bar~.mui-content .mui-fullscreen {
		top: 44px;
		height: auto;
	}
	.mui-bar-nav~.mui-content .mui-pull-top-pocket {
	    top: 0px;
	}
</style>
<!--
<div class="mui-input-row mui-search">
	<input type="search" class="mui-input-clear" placeholder="搜索" />
</div>-->
<div class="mui-content">
	<div id="slider" class="mui-slider mui-fullscreen">
		<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
			<a class="mui-control-item" href="#item1mobile">
				待审核
			</a>
			<a class="mui-control-item" href="#item2mobile">
				已审核
			</a>
			<a class="mui-control-item" href="#item3mobile">
				全部
			</a>
		</div>
		<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
		<div class="mui-slider-group">
			<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
				<div id="scroll1" class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="mui-loading">
							<div class="mui-spinner">
						
							</div>
						</div>
					</div>
				</div>
			</div>
			<div id="item2mobile" class="mui-slider-item mui-control-content">
				<div id="scroll2" class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="mui-loading">
							<div class="mui-spinner">
							</div>
						</div>
					</div>
				</div>
			</div>
			<div id="item3mobile" class="mui-slider-item mui-control-content">
				<div id="scroll3" class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="mui-loading">
							<div class="mui-spinner">
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script>
	(function($) {
		var title = "我发起的";
		mui.plusReady(function() {
			var self = plus.webview.currentWebview();
			title = self.title;
			mui('.mui-title')[0].innerHTML = title;
		
			//加载第一个选项卡--待审核
			createHtml("0", 'item1mobile');
			
			//循环初始化所有下拉刷新，上拉加载。
			$.each(document.querySelectorAll('.mui-slider-group .mui-scroll-wrapper'), function(index, pullRefreshEl) {
				$("#scroll"+(index+1)).pullRefresh({
					down: {
						contentrefresh: '正在刷新...',
						callback: function() {
							
							setTimeout(function() {
								createHtml(index, "item"+(index+1)+"mobile");
								$("#scroll"+(index+1)).pullRefresh().endPulldownToRefresh();
							}, 5000);
						}
					},
					up: {
						contentrefresh: '正在加载...',
						callback: function() {
							
							setTimeout(function() {
								createHtml(index, "item"+(index+1)+"mobile");
								$("#scroll"+(index+1)).pullRefresh().endPullupToRefresh(false);
							}, 5000);
						}
					}
				});
			});		
		});
		
		//按状态查询服务器数据
		var storage = window.localStorage;
		var root = storage.getItem('root');
		var createHtml = function(status, itemid){
			var url = root+"/att/getMeSat/"+status;
			if(title == "我处理的"){
				url = root+"/att/getWaitCheck/"+status;
			}
			mui.ajax(url, {
				dataType:'json',//服务器返回json格式数据
				type:'get',//HTTP请求类型
				timeout:0,//超时时间设置为10秒；
				async:false,
				success:function(data){
					//服务器返回响应，根据响应结果，分析是否登录成功；
					if(data.attList != null && data.attList.length != 0){
						var html = '<ul class="mui-table-view">';
						var attList = data.attList;
						for(var i = 0; i < attList.length; i++){
							html += '<li class="mui-table-view-cell mui-media">'+
								'<a class="mui-navigate-right" data-attendanceid="'+attList[i].attendance.id+'"';
							if(title == "我处理的" && parseInt(status) == 0){
								html += ' data-needcheck="1">';
							}else{
								html += ' data-needcheck="0">';
							}
							html +=	'<img class="mui-media-object mui-pull-left" src="../../images/user-photo.png">'+
								'<div class="mui-media-body">'+attList[i].tempUsername+
									'<p class="mui-ellipsis">'+attList[i].holidayName+'</p><p class="mui-ellipsis">'+attList[i].attendance.reason+'</p><p class="mui-ellipsis">'+
									attList[i].attendance.startday.substr(0, 10)+'~'+attList[i].attendance.endday.substr(0, 10)+'</p></div></a></li>';
						}
						html += '</ul>';
						document.getElementById(itemid).querySelector('.mui-scroll').innerHTML = html;
						
						mui('.mui-table-view').on('tap', 'a', function(e) {
							if(this.dataset.needcheck == "1"){
								mui.openWindow({
								    url:'check.html',
								    id:'check.html',
								    extras:{
								        attendanceid:this.dataset.attendanceid
								    }
								});
							}else{
								mui.openWindow({
								    url:'detail.html',
								    id:'detail.html',
								    extras:{
								        attendanceid:this.dataset.attendanceid
								    }
								});
							}
						});
					}else{
						document.getElementById(itemid).querySelector('.mui-scroll').innerHTML = "";
						mui.toast('无请假记录');
					}
				},
				error:function(xhr,type,errorThrown){
					//异常处理；
					console.log(xhr, type, errorThrown);
					mui.toast('网络异常');
				}
			});
		};
		
		$('.mui-scroll-wrapper').scroll({
			indicators: true //是否显示滚动条
		});

		var slider = new Array(0, 0, 0);
		document.getElementById('slider').addEventListener('slide', function(e) {
			if(slider[e.detail.slideNumber] == 0){
				createHtml(e.detail.slideNumber, "item"+(e.detail.slideNumber+1)+"mobile");
				slider[e.detail.slideNumber]++;
			}
		});

	})(mui);
</script>
</body>
</html>